<template>
  <div class='code-wrap'>
    <div class='code-content'>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部编码" name="1"></el-tab-pane>
      </el-tabs>
      <div class='code-search'>
        <el-form :inline="true" :model="formInline">
          <el-form-item label="能力分类编码">
            <el-input v-model="formInline.code" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="提供方">
            <el-input v-model="formInline.provider" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  icon="Search" @click="handleSearch">搜索</el-button>
            <el-button  icon="Refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class='table-wrap'>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="mark" label="能力标识" align='center' />
          <el-table-column prop="code" label="能力分类编码" align='center' />
          <el-table-column prop="provider" label="提供方（组织/机构）" align='center' />
          <el-table-column prop="index" label="最新序号" align='center' />
        </el-table>
      </div>
      <div class='pagination-wrap'>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import type { TabsPaneContext } from 'element-plus'
import { UserInfo } from '@admin/views/access/review/data'
import to from 'await-to-js'

const activeName = ref('1')
let tableData = ref([
  {
    mark: 'A',
    code: '01网络',
    provider: '010 政企事业部',
    index: '00001'
  },{
    mark: 'A',
    code: '01网络',
    provider: '010 政企事业部',
    index: '00001'
  },{
    mark: 'A',
    code: '01网络',
    provider: '010 政企事业部',
    index: '00001'
  },{
    mark: 'A',
    code: '01网络',
    provider: '010 政企事业部',
    index: '00001'
  },{
    mark: 'A',
    code: '01网络',
    provider: '010 政企事业部',
    index: '00001'
  },
])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)
let formInline = ref({
  code: '',
  provider: ''
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const handleSearch = () => {}

const handleReset = () => {
  formInline.value = {
    code: '',
    provider: ''
  }
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const fetchList = () => {}
</script>
<style lang='scss' scoped>
.code-wrap{
  padding: 20px;
  .code-content{
    background-color: #ffffff;
    padding: 10px;
    .code-search{

    }
    .table-wrap{}
    .pagination-wrap{
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>